<script lang="ts" setup>
import {sendCode} from '~/api/notify'
import {message} from 'ant-design-vue';

const {forgetModel, switchForget} = $(useModel())

// 初始值
const currentInfo = reactive({
    phone: '',
    captcha: ''
})

// 校验规则
const rules = {
    phone: [{required: true, trigger: 'blur', message: '请输入手机号!'}],
    captcha: [{required: true, trigger: 'blur', message: '请输入图形验证码!'}]
}

// 表单提交
const onFinish = async () => {
    //短信验证码发送接口
    const res = await sendCode({phone: currentInfo.phone, captcha: currentInfo.captcha, type: 'change'})
    if (res.code === 0) {
        forgetModel.phoneCache = currentInfo.phone
        switchForget()
        message.success(res.msg)
    }
}

// 图形验证码
let captchaSrc = $ref(`${baseUrl}/notify/v1/captcha?type=change&time=${Date.now()}`)
// 更新图形验证码
const resetCaptchaSrc = () => {
    if (captchaSrc.includes('&time')) {
        captchaSrc = captchaSrc.replace(/&time=[0-9]*/, '&time=' + Date.now())
    }
}

</script>

<template>
    <a-modal :footer="null" class="w-350px!" ref="formRef" v-model:visible="forgetModel.first">
        <h2 mb-6>修改密码</h2>
        <a-form autocomplete="off" ref="formRef" :model="currentInfo" @finish="onFinish">
            <a-form-item name="phone" :rules="rules.phone">
                <a-input placeholder="请输入手机号或邮箱" v-model:value="currentInfo.phone"></a-input>
            </a-form-item>

            <!-- 图形验证码  -->
            <a-form-item name="captcha" :rules="rules.captcha">
                <div flex>
                    <a-input placeholder="请输入图形验证码" autoComplete="false" v-model:value="currentInfo.captcha">
                        <template #suffix>
                            <reload-outlined mr-3px cursor-pointer @click="resetCaptchaSrc"/>
                        </template>
                    </a-input>
                    <div flex justify-center items-center>
                        <cdn-img w-80px h-30px :src='captchaSrc'/>
                    </div>
                </div>
            </a-form-item>

            <a-form-item>
                <a-button block bg="#f38e48!" b="#f38e48!" rounded-5px w-140px type="primary" html-type="submit">
                    下一步
                </a-button>
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<style lang="less" scoped>

</style>